let layerIndex;
let $;
var toast;
/**
 * 弹出学生新增加/更新对话框
 * 有id编辑，无id新增
 */

function showStudentDlg(id) {
    let title = "新增学生";
    if (id) {
        // 是编辑
        title = "编辑学生";
        $("#formId").css("display", "block");

        // 读取学生信息，并赋值
        $.ajax({
            url: "/api/student/" + id,
            method: "GET"
        }).done(result => {
            console.log(result);


            if(result.code>=0) {
                let data = result.data;

                // 遍历result对象并将值填充到 #studForm 表单
                $.each(result.data, function (key, value) {  // 键值对(属性名，属性值)
                    // 修改选择器，确保选择的是 #studForm 内的字段
                    var filed = $('#studForm [name="' + key + '"]');

                    if (filed.is(':radio')) { // 类型为单选框
                        filed.filter('[value="' + value + '"]').prop('checked', true); // 选中对应的单选按钮
                    } else if (filed.is(':checkbox')) { // 类型为复选框
                        filed.prop('checked', value === "yes"); // 选中复选框
                    } else { // 其他类型
                        filed.val(value); // 填充文本框或其他字段
                    }
                });
                //再次渲染表单，确保ui更新
                layui.form.render();


            }else {
                //出错了
                toast.error({
                    message:result.msg,
                });
            }

        });

    } else {
        // 新增
        $("#studForm")[0].reset(); // 清空表单内容
        $("#formId").css("display", "none"); // 新增学生是不显示id,id不填写
    }

    layerIndex = layer.open({
        type: 1,
        title: title,
        area: ['520px', 'auto'],
        content: $('#popDlg')[0].innerHTML // 捕获层

    });
}

// 查询条件代码
function getSearchCondition() {
    let formData = {}; // 初始化一个空对象，用于存储表单数据

    // 遍历每个输入元素，将其值存储到 formData 对象中
    $('#queryForm').find('input, select').each(function () {
        let name = $(this).attr('name'); // 获取元素的 name 属性
        let value = $(this).val(); // 获取元素的值

        // 只有 name 属性存在且值不为空才会添加到 formData 中
        if (name && value) {
            formData[name] = value;
        }
    });

    console.log("请求数据:", formData); // 调试输出请求数据
    return formData; // 返回包含表单数据的对象
}


function loadStudentList() {
    const table = layui.table;
    let student = getSearchCondition();
    table.reloadData("tbStudent", {
        where: {data: student}
    });
}

layui.use(['form', 'table', 'layer'], function () {
    $=layui.$
    toast = layui.toast;
    const form = layui.form;
    const table = layui.table;
    const layer = layui.layer;


    //(1)验证表单是否合法
    form.on('submit(stud-dlg)', function (data) {
        event.preventDefault(); // 阻止表单默认提交
        // commitStuDlg();

        //防止重复提交表单的标记
        if (this.isSubmitting) return false;
        this.isSubmitting = true;
        commitStuDlg()
            .catch(error => {
                console.error('提交失败', error);
            })
            .finally(()=>{
                this.isSubmitting = false;
            });
        return false;
    });

    //(2)表格初始化
    let student = getSearchCondition(); // 获取查询条件-示例代码

    // 创建layui渲染实例
    table.render({
        elem: '#tbStudent', // 指定表格容器的 ID
        url: '/api/student/getbypage', // 此处为静态模拟数据，实际使用时需换成真实接口
        method: "POST",
        contentType: 'application/json', // 确保以 JSON 格式发送
        where: { data: student }, // 传递的数据
        page: true, // 支持分页
        cols: [[
            { type: 'checkbox', fixed: 'left' }, // 添加复选框列
            { field: 'id', fixed: 'left', width: 100, title: 'id', sort: true }, // 定义列：id
            { field: 'name', title: '姓名' ,width: 180 }, // 定义列：姓名
            { field: 'no', title: '学号', width: 180 },
            {
                field: 'sex', width: 170, title: '性别', sort: true,
                templet: d => d.sex === 1 ? '男' : (d.sex === 2 ? '女' : '未知'), // 自定义性别显示,
            },
            { field: 'age', width: 180, title: '年龄', sort: true },
            { field: 'major', width: 180, title: '主修', sort: true },
            { field: 'role',  title: '角色', sort: true },
            // {
            //     fixed: 'right',
            //     title: '操作', width: 134, minWidth: 125, templet: '#editTemplate' // 操作列，使用自定义模板
            // }

        ]],
        done: function (rs) {
            console.log("表格渲染完成，返回数据:", rs); // 调试输出表格渲染结果
            if (rs.data.length === 0) {
                layer.msg('没有找到相关数据'); // 提示没有数据
            }
        },
        fail: function (rs, msg) {
            console.error("表格渲染失败:", msg); // 调试输出表格渲染失败信息
            layer.msg('请求失败，请重试'); // 提示请求失败
        }
    });

    // 触发单元格工具事件
    table.on('tool(tbStudent)', function (obj) {
        var data = obj.data; // 获取当前行数据
        console.log(obj);
        if (obj.event === 'edit') {
            showStudentDlg(data.id);  //编辑的时候跳出的已有的弹出框
        } else if (obj.event === 'delete') {
            deleteById(data.id);
        }
    });
});

function search() {
    let student = getSearchCondition();
    const table = layui.table;
    table.reloadData("tbStudent", {
        where: { data: student }
    });
    console.log("where condition:" + JSON.stringify(student));
}

// 删除
function deleteConfirm() {
    const table = layui.table;
    // 获取表格的选中状态
    const checkStatus = table.checkStatus('tbStudent'); // 'tbStudent'为表格ID或layui-filter

    if (checkStatus.data.length === 0) {
        layer.msg('请至少选择一条数据');
        return;
    }

    layer.confirm('确定删除选中的' + checkStatus.data.length + '条数据吗？', {icon: 3}, function(index) {
        const ids = checkStatus.data.map(item => item.id);

        $.ajax({
            url: "/api/student/deleteBatch",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify(ids),
            success: function(result) {
                if (result.code === 0) {
                    layer.msg('删除成功');
                    loadStudentList();
                } else {
                    layer.msg('删除失败: ' + result.msg);
                }
            },
            error: function() {
                layer.msg('删除失败');
            }
        });
        layer.close(index);
    });
}

// 提交//第一次编写的成功但效果不好
// function commitStuDlg() {
//     let id = $("#id").val(); // 读取id
//     let formData = $(".layui-layer-page #studForm").serializeArray(); // 读取表单数据
//
//     // 将formData转换为JSON对象
//     let data = {};
//     formData.forEach(function (item) {
//         data[item.name] = item.value;
//     });
//
//     $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled"); // 禁用按钮
//
//     if (id != null && id != "") {
//         // id不为空，为更新学生
//         $.ajax({
//             url: "/api/student/update",
//             method: "PUT",
//             contentType: 'application/json', // 确保以 JSON 格式发送
//             data: JSON.stringify(data) // 发送JSON格式的数据
//         }).done(result => {
//             console.log(result);
//             if (result.code === 0) {
//                 loadStudentList();
//                 if (layerIndex) layer.close(layerIndex);
//                 layer.msg('更新成功');
//             } else {
//                 layer.msg(result.msg);
//             }
//         }).fail((jqXHR, textStatus, errorThrown) => {
//             console.error("Request failed: " + textStatus + " - " + errorThrown);
//             layer.msg('更新失败: ' + errorThrown);
//             $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
//         });
//     } else {
//         // id为空为新增学生
//         $.ajax({
//             url: "/api/student/add",
//             method: "POST",
//             contentType: 'application/json', // 确保以 JSON 格式发送
//             data: JSON.stringify(data) // 发送JSON格式的数据
//         }).done(result => {
//             console.log(result);
//             if (result.code === 0) {
//                 loadStudentList();
//                 if (layerIndex) layer.close(layerIndex);
//                 layer.msg('添加成功');
//             } else {
//                 layer.msg(result.msg);
//             }
//         }).fail((jqXHR, textStatus, errorThrown) => {
//             console.error("Request failed: " + textStatus + " - " + errorThrown);
//             layer.msg('添加失败: ' + errorThrown);
//             $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
//         });
//     }
// }

//第二次编写的，按视频的但是不成功，
// function commitStuDlg() {
//     //返回Promise以便更好的控制流程
//     return new Promise((resolve, reject) => {
//
//
//     $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");
//
//     const id = $("#id").val();
//     const formData = $(".layui-layer-page #studForm").serialize();
//     const url=id ? "/api/student/update" : "/api/student/add";
//     const method = id ? "PUT" : "POST";
//
//     $.ajax({
//         url: url,
//         method: method,
//         //contentType: 'application/json', // 确保使用正确的 Content-Type
//         data: formData
//         //dataType: 'json' // 确保服务器返回的数据类型
//     }).done(result => {
//         if (result.code === 0 && result.data?.id) {
//             //成功情况
//             search();//刷新列表
//             if (layerIndex){
//                 layer.close(layerIndex);
//             }
//             resolve(result);
//         }else {
//             //处理业务逻辑错误
//             const errorMsg = result.msg || (id ?"更新失败" : "新增失败，没有返回id");
//             toast.error({message: errorMsg});
//             reject (new Error(errorMsg));
//         }
//     }).fail((jpXHR,textStatus,errorThrown) => {
//         const errorMsg =`请求失败: ${textStatus}- ${errorThrown}`;
//         console.error(errorMsg);
//         alert("系统错误，请稍后重试");
//         reject(new Error(errorMsg));
//     }).always(() => {
//         //无论成功失败，最后都要恢复按钮状态
//         $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
//     });
//
//     });
// }

function commitStuDlg() {
    return new Promise((resolve, reject) => {
        $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");

        const id = $("#id").val();
        const formData = $(".layui-layer-page #studForm").serializeArray();
        const data = {};
        formData.forEach(item => {
            data[item.name] = item.value;
        });

        const url = id ? "/api/student/update" : "/api/student/add";
        const method = id ? "PUT" : "POST";

        $.ajax({
            url: url,
            method: method,
            contentType: 'application/json',
            data: JSON.stringify(data)
        }).done(result => {
            if (result.code === 0) {
                loadStudentList();
                if (layerIndex) layer.close(layerIndex);
                layer.msg(id ? '更新成功' : '添加成功');
                resolve(result);
            } else {
                const errorMsg = result.msg || (id ? "更新失败" : "添加失败");
                toast.error({ message: errorMsg });
                reject(new Error(errorMsg));
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            const errorMsg = `请求失败: ${textStatus} - ${errorThrown}`;
            console.error(errorMsg);
            toast.error({ message: "系统错误，请稍后重试" });
            reject(new Error(errorMsg));
        }).always(() => {
            $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
        });
    });
}



function deleteById(id) {
    layer.confirm('你确定删除吗？一旦删除，不可恢复！', {icon: 3}, function() {
        $.ajax({
            url: "/api/student/delete/" + id,
            method: "DELETE",
            success: function(result) {
                if (result.code === 0) {
                    layer.msg('删除成功');
                    loadStudentList();
                } else {
                    layer.msg('删除失败: ' + result.msg);
                }
            },
            error: function() {
                layer.msg('删除失败');
            }
        });
    });
}
